<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <title>React 学习！！</title>
</head>
<body>
<div id="app"></div>
<script src="../bower_components/react/react.min.js"></script>
<script src="../bower_components/react/react-dom.min.js"></script>
<script src="../bower_components/react/browser.min.js"></script>
<script type="text/babel">
    var FormApp = React.createClass({
        getInitialState: function () {
            return {
                inputValue: 'input value',
                selectValue: 'A',
                radioValue: 'B',
                checkValues: [],
                textareaValue: 'some text here,,,,,'
            }
        },
        handlerInput:function(e){
            this.setState({
                inputValue:e.target.value
            })
        },
        handlerSelect:function(e){
            this.setState({
                selectValue:e.target.value
            })
        },
        handlerSubmit:function(e){
            e.preventDefault();
            console.log('form submiting...');
            console.log(e);
        },
        render: function () {
            return (
                    <form>
                        <input type="text" value={this.state.inputValue} onChange={this.handlerInput}/>
                        <br/> 
                        选项：
                        <select value="B" onChange={this.handlerSelect}>
                            <option value="A">A</option>
                            <option value="B">B</option>
                            <option value="C">C</option>
                            <option value="D">D</option>
                            <option value="E">E</option>
                        </select>
                        <br/>
                        <p>radio button!</p>
                        A
                        <input name="goodRadio" type="radio" value="A" /> 
                        B
                        <input name="goodRadio" type="radio" defaultChecked value="B" /> 
                        C
                        <input name="goodRadio" type="radio" value="C" />
                        <br/> 
                        A
                        <input name="goodCheckbox" type="checkbox" value="A" /> 
                        B
                        <input name="goodCheckbox" type="checkbox" checked value="B" /> 
                        C
                        <input name="goodCheckbox" type="checkbox" value="C" />
                        <br/>
                        <textarea defaultValue="default textarea value"></textarea>
                        <button type="submit">提交</button>
                    </form>

            )
        }
    });

    var formApp = ReactDOM.render(
            <FormApp />,
            document.getElementById('app')
    )

</script>
</body>
</html>